<template>
	<view>
		<scroll-view :scroll-x="true" class="header">
			<view class="header-container flex" :style="{'--count': tabs.length}">
				<view class="tab flex flex-col items-center justify-center"
					v-for="e,i in tabs" :key="i"
					:class="[tabIndex == i ? 'tab-active' : '']"
					@click="TabChange(i)">
					<text>{{e.name}}</text>
					<view class="tab-line"></view>
				</view>
			</view>
		</scroll-view>
		<view style="height: var(--header-height);"></view>
		<view class="content">
			<view class="card flex" v-for="e, i in list" :key="i" @click="Nav(e)">
				<view class="card-info flex flex-col">
					<text class="card-title" v-if="e.course">{{e.course.name}}</text>
					<text class="card-title" v-if="e.poss">{{e.poss.describe}}</text>
					<!-- <view class="card-views-box flex">
						<view class="flex items-center" style="gap: 10rpx;">
							<uni-icons color="#9f9f9f" type="eye" size="18"></uni-icons>
							<text class="views-num">1k</text>
						</view>
						<view class="flex items-center" style="gap: 10rpx;">
							<uni-icons color="#9f9f9f" type="heart" size="18"></uni-icons>
							<text class="views-num">263</text>
						</view>
					</view> -->
					<text class="describe" v-if="e.course">{{e.course.describe}}</text>
					<text class="describe" v-if="e.poss">{{e.poss.replenishment || ''}}</text>
				</view>
				<image class="card-image" v-if="e.course" :src="e.course.headimg" mode="aspectFill"></image>
				<image class="card-image" v-else-if="e.member" :src="e.member.headimg" mode="aspectFill"></image>
			</view>
			<text class="no-more" v-if="loadOver">没有更多数据</text>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import config from '../../config/index.js'
	
	const tabs = ref([
		{
			name: '课程',
			pst: 0
		},
		{
			name: '帖子',
			pst: 1
		}
	])
	const tabIndex = ref(0)
	const options = ref({})
	
	onLoad(_options => {
		options.value = _options
		uni.setNavigationBarTitle({
			title: options.value.type == 'view' ? '浏览记录' : '点赞和收藏'
		})
		GetList()
	})
	
	/**
	 * @description 切换tab
	 * @param {Object} index
	 */
	function TabChange(index) {
		tabIndex.value = index
		page.value = 1
		list.value = []
		loadOver.value = false
		GetList()
	}
	
	const list = ref([])
	const page = ref(1)
	const limit = ref(10)
	const loadOver = ref(false)
	function GetList() {
		uni.showLoading({
			title: '加载中'
		})
		let params = {
			'member.id': uni.getStorageSync('user').id,
			page: page.value,
			limit: limit.value
		}
		if (options.value.type == 'view') {
			params.sts = tabs.value[tabIndex.value].pst
		} else {
			params.pst = tabs.value[tabIndex.value].pst
		}
		console.log(params)
		uni.request({
			url: config.baseUrl + (options.value.type == 'view' ? '/app/memberQueryBrowseHistrylsit' : '/app/membergetCollectlist'),
			data: params,
			header: {
				"Content-Type": "application/x-www-form-urlencoded"
			},
			method: 'POST'
		}).then(res => {
			console.log(res)
			let { data: resData } = res
			let { data, code } = resData
			if (code == 200) {
				if (page.value == 1) {
					list.value = data
				} else {
					list.value.push(...data)
				}
				if (data.length < limit.value) {
					loadOver.value = true
				}
				page.value++
			}
			uni.hideLoading()
		}).catch(err => {
			uni.hideLoading()
		})
	}
	
	onReachBottom(() => {
		if (!loadOver.value) {
			GetList()
		}
	})
	
	function Nav(item) {
		if (tabIndex.value == 0) {
			uni.navigateTo({
				url: `./lesson?type=lesson&id=${item.course.id}`
			})
		} else {
			uni.navigateTo({
				url: `/pages/community/postDetail?id=${item.poss.id}`
			})
		}
	}
</script>

<style>
	page {
		background-image: none;
		--header-height: 80rpx;
	}
	
	.header {
		background: #f3faff;
		height: 80rpx;
	}
	
	.content {
		padding: 20rpx 20rpx 60rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.header {
		background: #f3faff;
		height: var(--header-height);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}
	
	.header-container {
		height: 100%;
		width: auto;
		max-width: calc(var(--count) * 300rpx);
	}
	
	.tab {
		padding: 0 20rpx;
	}
	
	.tab text {
		white-space: nowrap;
		font-size: 28rpx;
		padding-bottom: 10rpx;
		transition: all .2s;
	}
	
	.tab-active text {
		-webkit-text-stroke: 1px currentColor;
	}
	
	.tab-line {
		width: 0;
		height: 10rpx;
		background-image: linear-gradient(to right, #54afff, transparent);
		transition: all .2s;
	}
	
	.tab-active .tab-line {
		width: 34rpx;
	}
	
	.card {
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		gap: 20rpx;
	}
	
	.card-info {
		flex: 1;
		gap: 20rpx;
	}
	
	.card-title {
		font-size: 26rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.describe {
		font-size: 24rpx;
		color: #737373;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.card-views-box {
		gap: 20rpx;
		font-size: 26rpx;
		color: #9f9f9f;
	}
	
	.card-image {
		width: 132rpx;
		height: 132rpx;
		border-radius: 16rpx;
	}
	
	.no-more {
		font-size: 24rpx;
		color: #b1bfcb;
		text-align: center;
	}
</style>
